﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON数据表查看器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            padding: 20px;
            color: #333;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        header {
            background: linear-gradient(90deg, #4b6cb7 0%, #182848 100%);
            color: white;
            padding: 25px 30px;
            text-align: center;
        }

        h1 {
            font-size: 28px;
            margin-bottom: 10px;
            font-weight: 600;
        }

        .subtitle {
            font-size: 16px;
            opacity: 0.9;
        }

        .content {
            padding: 25px;
        }

        .control-panel {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 25px;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 8px;
            align-items: center;
        }

        .table-selector {
            flex: 1;
            min-width: 200px;
        }

        select, input, button {
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 15px;
            transition: all 0.3s;
        }

            select:focus, input:focus {
                outline: none;
                border-color: #4b6cb7;
                box-shadow: 0 0 0 3px rgba(75, 108, 183, 0.2);
            }

        button {
            background: #4b6cb7;
            color: white;
            border: none;
            cursor: pointer;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 8px;
        }

            button:hover {
                background: #3a5999;
                transform: translateY(-2px);
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            }

        .search-box {
            flex: 2;
            min-width: 250px;
            position: relative;
        }

            .search-box input {
                width: 100%;
                padding-left: 40px;
            }

        .search-icon {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #777;
        }

        .data-info {
            margin-bottom: 15px;
            color: #666;
            font-size: 14px;
        }

        .table-container {
            overflow-x: auto;
            border-radius: 8px;
            border: 1px solid #e1e5e9;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            min-width: 600px;
        }

        th {
            background: #f1f5f9;
            padding: 15px 12px;
            text-align: left;
            font-weight: 600;
            color: #4b6cb7;
            border-bottom: 2px solid #e1e5e9;
            cursor: pointer;
            user-select: none;
            position: relative;
        }

            th:hover {
                background: #e8edf5;
            }

            th::after {
                content: '↕';
                position: absolute;
                right: 10px;
                opacity: 0.5;
            }

        td {
            padding: 12px;
            border-bottom: 1px solid #e1e5e9;
        }

        tr:hover {
            background: #f8fafc;
        }

        .json-viewer {
            margin-top: 30px;
            background: #f8f9fa;
            border-radius: 8px;
            padding: 20px;
            display: none;
        }

        .json-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        pre {
            background: #2d3748;
            color: #e2e8f0;
            padding: 15px;
            border-radius: 6px;
            overflow-x: auto;
            font-size: 14px;
            line-height: 1.5;
        }

        .no-data {
            text-align: center;
            padding: 40px;
            color: #777;
            font-size: 16px;
        }

        @media (max-width: 768px) {
            .control-panel {
                flex-direction: column;
                align-items: stretch;
            }

            .table-selector, .search-box {
                min-width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>JSON数据表查看器</h1>
            <p class="subtitle">从JSON数据中提取并展示多个表的明细数据</p>
        </header>

        <div class="content">
            <div class="control-panel">
                <div class="table-selector">
                    <select id="tableSelect">
                        <option value="">请选择数据表...</option>
                        <option value="users">用户表 (users)</option>
                        <option value="products">产品表 (products)</option>
                        <option value="orders">订单表 (orders)</option>
                    </select>
                </div>

                <div class="search-box">
                    <span class="search-icon">🔍</span>
                    <input type="text" id="searchInput" placeholder="搜索表格内容...">
                </div>

                <button id="showJsonBtn">
                    <span>显示JSON数据</span>
                </button>
            </div>

            <div class="data-info" id="dataInfo">
                请从上方选择数据表查看明细数据
            </div>

            <div class="table-container">
                <table id="dataTable">
                    <thead>
                        <tr>
                            <!-- 表头将通过JavaScript动态生成 -->
                        </tr>
                    </thead>
                    <tbody>
                        <!-- 表格数据将通过JavaScript动态生成 -->
                    </tbody>
                </table>
            </div>

            <div class="no-data" id="noDataMessage">
                暂无数据，请选择数据表
            </div>

            <div class="json-viewer" id="jsonViewer">
                <div class="json-header">
                    <h3>原始JSON数据</h3>
                    <button id="hideJsonBtn">隐藏JSON</button>
                </div>
                <pre id="jsonData"></pre>
            </div>
        </div>
    </div>

    <script>
        // 模拟从后台获取的JSON数据（dataset转换而来）
        const jsonData = {
            "users": [
                { "id": 1, "name": "张三", "email": "zhangsan@example.com", "role": "管理员", "joinDate": "2022-03-15" },
                { "id": 2, "name": "李四", "email": "lisi@example.com", "role": "编辑", "joinDate": "2022-05-20" },
                { "id": 3, "name": "王五", "email": "wangwu@example.com", "role": "用户", "joinDate": "2022-07-10" },
                { "id": 4, "name": "赵六", "email": "zhaoliu@example.com", "role": "用户", "joinDate": "2022-09-05" },
                { "id": 5, "name": "钱七", "email": "qianqi@example.com", "role": "编辑", "joinDate": "2022-11-12" }
            ],
            "products": [
                { "id": 101, "name": "笔记本电脑", "category": "电子产品", "price": 5999, "stock": 45 },
                { "id": 102, "name": "智能手机", "category": "电子产品", "price": 3999, "stock": 120 },
                { "id": 103, "name": "办公椅", "category": "家具", "price": 899, "stock": 30 },
                { "id": 104, "name": "机械键盘", "category": "电子产品", "price": 499, "stock": 80 },
                { "id": 105, "name": "显示器", "category": "电子产品", "price": 1599, "stock": 25 }
            ],
            "orders": [
                { "id": 1001, "userId": 1, "productId": 101, "quantity": 1, "orderDate": "2023-01-15", "status": "已完成" },
                { "id": 1002, "userId": 2, "productId": 102, "quantity": 2, "orderDate": "2023-01-18", "status": "已发货" },
                { "id": 1003, "userId": 3, "productId": 104, "quantity": 1, "orderDate": "2023-01-20", "status": "处理中" },
                { "id": 1004, "userId": 1, "productId": 105, "quantity": 1, "orderDate": "2023-01-22", "status": "已完成" },
                { "id": 1005, "userId": 4, "productId": 103, "quantity": 3, "orderDate": "2023-01-25", "status": "已发货" }
            ]
        };

        // DOM元素
        const tableSelect = document.getElementById('tableSelect');
        const searchInput = document.getElementById('searchInput');
        const dataInfo = document.getElementById('dataInfo');
        const dataTable = document.getElementById('dataTable');
        const tableHead = dataTable.querySelector('thead tr');
        const tableBody = dataTable.querySelector('tbody');
        const noDataMessage = document.getElementById('noDataMessage');
        const jsonViewer = document.getElementById('jsonViewer');
        const jsonDataElement = document.getElementById('jsonData');
        const showJsonBtn = document.getElementById('showJsonBtn');
        const hideJsonBtn = document.getElementById('hideJsonBtn');

        // 当前选中的表和过滤后的数据
        let currentTable = '';
        let currentData = [];
        let sortDirection = {};

        // 初始化
        function init() {
            // 监听表选择变化
            tableSelect.addEventListener('change', function() {
                currentTable = this.value;
                if (currentTable)
                {
                    loadTableData(currentTable);
                    noDataMessage.style.display = 'none';
                    dataTable.style.display = 'table';
                }
                else
                {
                    noDataMessage.style.display = 'block';
                    dataTable.style.display = 'none';
                }
            });

            // 监听搜索输入
            searchInput.addEventListener('input', function() {
                filterTableData(this.value);
            });

            // 显示/隐藏JSON数据
            showJsonBtn.addEventListener('click', function() {
                jsonDataElement.textContent = JSON.stringify(jsonData, null, 2);
                jsonViewer.style.display = 'block';
            });

            hideJsonBtn.addEventListener('click', function() {
                jsonViewer.style.display = 'none';
            });

            // 初始状态
            noDataMessage.style.display = 'block';
            dataTable.style.display = 'none';
        }

        // 加载表数据
        function loadTableData(tableName) {
            if (jsonData[tableName]) {
                currentData = jsonData[tableName];
                renderTable(currentData);
                dataInfo.textContent = `当前显示: ${tableName} 表，共 ${currentData.length} 条记录`;
            } else {
                dataInfo.textContent = `错误: 未找到表 "${tableName}" 的数据`;
                tableHead.innerHTML = '';
                tableBody.innerHTML = '';
            }
        }

        // 渲染表格
        function renderTable(data) {
            // 清空表格
            tableHead.innerHTML = '';
            tableBody.innerHTML = '';

            if (data.length === 0) {
                return;
            }

            // 创建表头
            const headers = Object.keys(data[0]);
            headers.forEach(header => {
                const th = document.createElement('th');
                th.textContent = header;
                th.addEventListener('click', () => sortTable(header));
                tableHead.appendChild(th);
                sortDirection[header] = 1; // 1表示升序，-1表示降序
            });

            // 创建表格行
            data.forEach(row => {
                const tr = document.createElement('tr');
                headers.forEach(header => {
                    const td = document.createElement('td');
                    td.textContent = row[header];
                    tr.appendChild(td);
                });
                tableBody.appendChild(tr);
            });
        }

        // 表格排序
        function sortTable(column) {
            const direction = sortDirection[column] || 1;

            currentData.sort((a, b) => {
                if (a[column] < b[column]) return -1 * direction;
                if (a[column] > b[column]) return 1 * direction;
                return 0;
            });

            sortDirection[column] = -direction; // 切换排序方向
            renderTable(currentData);
        }

        // 过滤表格数据
        function filterTableData(searchTerm) {
            if (!currentTable || !searchTerm) {
                renderTable(currentData);
                dataInfo.textContent = `当前显示: ${currentTable} 表，共 ${currentData.length} 条记录`;
                return;
            }

            const filteredData = currentData.filter(row => {
                return Object.values(row).some(value =>
                    value.toString().toLowerCase().includes(searchTerm.toLowerCase())
                );
            });

            renderTable(filteredData);
            dataInfo.textContent = `当前显示: ${currentTable} 表，搜索 "${searchTerm}"，找到 ${filteredData.length} 条记录`;
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', init);
    </script>
</body>
</html>